/* 上传组件校验失败样式 */
.is-error {
	.upload,
	.upload:hover {
		border-color: var(--el-color-danger) !important;
	}
}
.upload-box {
	.upload {
		width: 100%;
		height: 100%;
		overflow: hidden;
		border: 1px dashed var(--el-border-color-darker);
		border-radius: 8px;
		transition: var(--el-transition-duration-fast);
		&:hover {
			border-color: var(--el-color-primary);
		}
		:deep(.el-upload) {
			position: relative;
			width: 100%;
			height: 100%;
			.el-upload-dragger {
				width: 100%;
				height: 100%;
				padding: 0;
				border: none;
			}
			.upload-image {
				width: 100%;
				height: 100%;
			}
			.upload-icon {
				width: 100%;
				height: 100%;
				font-size: 28px;
				color: #8c939d;
			}
			.upload-handle {
				position: absolute;
				top: 0;
				right: 0;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 100%;
				cursor: pointer;
				background: rgb(0 0 0 / 70%);
				opacity: 0;
				transition: var(--el-transition-duration-fast);
				.handle-icon {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 0 6%;
					color: aliceblue;
					.el-icon {
						margin-bottom: 40%;
						font-size: 130%;
						line-height: 130%;
					}
					span {
						font-size: 85%;
						line-height: 85%;
					}
				}
			}
			&:hover {
				.upload-handle {
					opacity: 1;
				}
			}
		}
	}
	.el-upload__tip {
		line-height: 18px;
		text-align: center;
	}
}
